<template>
  <div class="card-face card-face-1" :class="[swipeAnimation, enterAnimation]">
    <div class="image-container">
      <img :src="word.imageUrl" :alt="word.text" />
    </div>
    <div class="meaning-container">
      <p class="meaning">{{ word.meaning }}</p>
      <span class="word-type">{{ word.type }}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CardFaceImage',
  props: {
    word: {
      type: Object,
      required: true
    },
    swipeAnimation: {
      type: String,
      default: ''
    },
    enterAnimation: {
      type: String,
      default: ''
    }
  }
}
</script>